<template>
  <el-drawer
    append-to-body
    destroy-on-close
    :size="size"
    :title="title"
    :visible.sync="drawer"
    @close="close"
  >
    <div v-if="drawer">
      <div class="title">
        <div class="name">{{ text }}</div>
        <el-button type="primary" @click="addBook">添加预定</el-button>
      </div>
      <div v-if="bookList.length > 0" class="bookList">
        <div
          v-for="item in bookList"
          :key="item.id"
          class="bookBox"
          @click="bookDetail(item)"
        >
          <div class="name">{{ item.customer_name }}</div>
          <div class="detail">
            预定周期：{{ item.start_date }}至{{ item.end_date }}
          </div>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无记录" />
      </div>
    </div>
    <book-add ref="bookAdd" @fetch-data="setBook" />
    <book-detail
      ref="bookDetail"
      @fetch-data="setBook"
      @update-book="getBook"
    />
  </el-drawer>
</template>
<script>
import { getBookList } from '@/api/rent'
import bookAdd from './components/bookAdd'
import bookDetail from './bookDetail'
export default {
  name: 'BookList',
  components: { bookAdd, bookDetail },
  data() {
    return {
      size: 460,
      title: '房间预订管理',
      text: '',
      room_id: '',
      bookList: [],
      drawer: false,
    }
  },
  methods: {
    showEdit(row) {
      this.room_id = row.id
      this.text = row.room_address
      this.getBook()
      this.drawer = true
    },
    addBook() {
      this.$refs['bookAdd'].showEdit(this.room_id)
    },
    bookDetail(item) {
      this.$refs['bookDetail'].showEdit(item)
    },
    close() {
      this.drawer = false
    },
    setBook() {
      this.getBook()
      this.$emit('fetch-data')
    },
    async getBook() {
      const { data } = await getBookList({ room_id: this.room_id })
      this.bookList = data.items
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #f0f7ff;
  .name {
    font-size: 16px;
    color: #000;
    font-weight: bolder;
  }
}
.bookList {
  padding: 20px;
  .bookBox {
    padding: 16px;
    background: #f0f7ff;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 20px;
    &:hover {
      box-shadow: 0 0 12px #ccc;
    }
    .name {
      font-size: 16px;
      color: #000;
      font-weight: bolder;
      line-height: 26px;
    }
    .detail {
      font-size: 14px;
      color: #3f3f3f;
      margin-top: 4px;
    }
  }
}
</style>